<template>
    <!-- 'block_6': child  == 6, -->
    <div class="block" :style="wallImage" :class="{
        'block_1': child  == 1,
        'block_2': child  == 2,
        'block_3': child  == 3,
        'block_4': child  == 4,
        'block_7': child  == 7,
        }">
        <div v-if="child == 6" style="position: absolute; left: 0; top: 0;" class="block block_4"></div>
        <div v-if="child == 6 || child == 5" ></div>
    </div>
</template>

<script>
export default {
    props: ['child', 'boardConfig', 'moveStatus', 'x', 'y'],
    data() {
        return {
            wallImage: {},
        }
    },
    mounted() {
        if (this.child == 1) {
            this.renderWall();
        }
    },
    methods: {
        renderWall() {
            // var middlePoint = this.boardConfig[this.x][this.y];
            var topPoint = parseInt(this.boardConfig[this.x - 1] ? this.boardConfig[this.x - 1][this.y] : 0)
            if (topPoint != 1) topPoint = 0;
            var bottomPoint = parseInt(this.boardConfig[this.x + 1] ? this.boardConfig[this.x + 1][this.y] : 0);
            if (bottomPoint != 1) bottomPoint = 0;
            var leftPoint = parseInt(this.boardConfig[this.x][this.y - 1] || 0);
            if (leftPoint != 1) leftPoint = 0;
            var rightPoint = parseInt(this.boardConfig[this.x][this.y + 1] || 0);
            if (rightPoint != 1) rightPoint = 0;
            var side = topPoint + bottomPoint + leftPoint + rightPoint;
            // console.log(middlePoint, side);
            var backgroundString = 'wall_' + side + '_';
            switch (side) {
                case 0:
                    break;
                case 1:
                    if (topPoint) backgroundString += 't';
                    if (bottomPoint) backgroundString += 'd';
                    if (leftPoint) backgroundString += 'l';
                    if (rightPoint) backgroundString += 'r';
                    break;
                case 2:
                    if (topPoint && leftPoint) backgroundString += 'l';
                    if (topPoint && rightPoint) backgroundString += 't';
                    if (topPoint && bottomPoint) backgroundString += 's';
                    if (rightPoint && leftPoint) backgroundString += 'h';
                    if (bottomPoint && leftPoint) backgroundString += 'd';
                    if (bottomPoint && rightPoint) backgroundString += 'r';
                    break;
                case 3:
                    if (topPoint && leftPoint && bottomPoint) backgroundString += 'l';
                    if (topPoint && rightPoint && bottomPoint) backgroundString += 'r';
                    if (rightPoint && leftPoint && topPoint) backgroundString += 't';
                    if (rightPoint && leftPoint && bottomPoint) backgroundString += 'd';
                    break;
                case 4:
                    break;
                default:
                    break;
            }
            this.wallImage = {
                'background-image': 'url(/static/wall/' + backgroundString + '.png)'
            };
        },
    },

}
</script>

<style>

</style>